<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../lib/pagination/pagination.css"/>
		<link rel="stylesheet" type="text/css" href="../css/shops.css"/>
	</head>
<body>
	<script src="../lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/shops.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入分页器插件 -->
	
	<script src="../lib/pagination/pagination.js" type="text/javascript" charset="utf-8"></script>
	
	<header class="clean" >
		<h1 class="mui-title"></h1>
		<div class="topbar-left ">
			<ul class="clean">
				<li>在线商城</li>
				<li>坚果Pro3</li>
				<li>坚果Pro2S</li>
				<li>坚果TNT工作站</li>
				<li>Smartisan OS</li>
				<li>欢喜云</li>
				<li>应用</li>
				<li>论坛</li>
				<li>荣誉与奖项</li>
				<li>加入我们</li>
				<li>下载APP</li>
			</ul>
		</div>
		<div class="topbar-right ">
			<ul class="clean">
				<li id="login">登录</li>
				<li id="car">购物车</li>
			</ul>
		</div>
	</header>
	<div class="main-title container">
		<ul class="list clean">
			<!-- <li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>服务</li> -->
		</ul>
		<div class="select">
			<input id='select' type="text" name="" id="" value="" placeholder="搜索"/>
		</div>
	</div>
	<div class="datesWide container">
		<div class="dates container ">
			<ul class="dates-list clean">
			</ul>	
		</div>
	</div>

	
<!-- 商品列表 -->
	<div class="keyword container">
		<ul class="clean">
			<li class="active">默认排序</li>
			<li>价格从高到低排序</li>
			<li>价格低到高排序</li>
		</ul>
	</div>
	<div class="shopbox container">
		<ul class="clean">
			<li>
				<img src="https://resource.smartisan.com/resource/59fbbab676144fc8a374048361a4ec11.jpg?x-oss-process=image/resize,w_216/format,webp" >
				<h3>惠普（HP）Mini M30w 黑白激光无线多功能打印机</h3>
				<h5>打印机开学季直降</h5>
				<span>￥1099.00</span>
			</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
		</ul>
	</div>
	<!-- 分页器 -->
	<div class="pages container">
		<div class="page m-style"></div>
	</div>
	
	
	<script type="text/javascript">
		//关于分页器以及页面的渲染过程
		//1.请求到json数据
		getdatas();
		function getdatas(){
			$.ajax({
				url:"../lib/json/shoplist.json",
				dataType:'json',
				success:function(res){
					console.log(res);
					//2.配置分页器参数
					$('.page').pagination({
					  pageCount:Math.ceil(res.length / 15), // 总页数
					  current: 1, // 当前页
					  jump: true,
					  coping: true,
					  homePage: '首页', // 首页按钮的文本
					  endPage: '末页', // 末页按钮的文本
					  prevContent: '上页',
					  nextContent: '下页',
					  callback: function (api) { // 当你切换页面的时候会触发
					    let curr = api.getCurrent()
					    // console.log(curr)
						let list = res.slice((curr - 1) * 15, curr * 15)  //3.每页按照索引在数组中取出15个对象
						//点击到换页的时候执行渲染
						bindHtml(list)
					  }
					})
					//5.请求到数据先对页面渲染一次
					bindHtml(res.slice(0, 15));
					
					//跳转到详情页面的点击事件
					$('.shopbox >ul').on('click','li',function(){
						const id = $(this).data('id')
						console.log(id);
						
						// 从总的数据里面找到 id 配套的哪一个数据
						let data = {};
						for (let i = 0; i < res.length; i++) {
						  if (res[i].id === id) {
						    data = res[i];
							console.log(data)
						    break
						  }
						}
						//把这个li里面对应的对象设置到localstorage里面，然后再跳转到详情页面进行渲染
						localStorage.setItem('goods_info', JSON.stringify(data))
						window.location.href = './details.html';
					})
					
					
					
				}
			});
		}
	//4.页面渲染
	 function bindHtml(list){
		// console.log(list)
		let str='';
		list.forEach(item=>{
			str+=`
				<li data-id="${ item.id }">
					<img src="${item.img_src}" >
					<h3>${item.name}</h3>
					<h5>${item.des}</h5>
					<span>￥${item.price}</span>
				</li>
			`
		});
		$('.shopbox ul').html(str);
	 }
	</script>
	
	<script type="text/javascript">
	// 定义一个降序排序的函数
	function sortPriceDown(a,b){
	return b.price-a.price
	};
	//定义一个升序函数
	function sortPriceUp(a,b){
	return a.price-b.price
	}
	//点击切换到购物车页面的事件
	$('.topbar-right  #car').click(function(){
		window.location.href='./carshops.html'
	})
	//点击切换到登录页面
	$('#login').click(function(){
		window.location.href='./login.html'
	})
	
	//切换序列的事件
	$('.keyword > ul li').click(function(){
	console.log(this)
	$(this).addClass('active')
		.siblings('li').removeClass('active');
	//判断处于哪个排序阶段  默认阶段
		if($(this).index()===0){
			//1.请求到json数据
			$.ajax({
				url:"../lib/json/shoplist.json",
				dataType:'json',
				success:function(res){
					// console.log(res);
					//2.配置分页器参数
					$('.page').pagination({
					  pageCount:Math.ceil(res.length / 15), // 总页数
					  current: 1, // 当前页
					  jump: true,
					  coping: true,
					  homePage: '首页', // 首页按钮的文本
					  endPage: '末页', // 末页按钮的文本
					  prevContent: '上页',
					  nextContent: '下页',
					  callback: function (api) { // 当你切换页面的时候会触发
						let curr = api.getCurrent()
						// console.log(curr)
						let list = res.slice((curr - 1) * 15, curr * 15)  //3.每页按照索引在数组中取出15个对象
						//点击到换页的时候执行渲染
						bindHtml(list)
					  }
					})
					
					//5.请求到数据先对页面渲染一次
					bindHtml(res.slice(0, 15))
				}
			})
		//4.页面渲染
		 function bindHtml(list){
			// console.log(list)
			let str='';
			list.forEach(item=>{
				str+=`
					<li data-id="${ item.id }">
						<img src="${item.img_src}" >
						<h3>${item.name}</h3>
						<h5>${item.des}</h5>
						<span>￥${item.price}</span>
					</li>
				`
			});
			$('.shopbox ul').html(str);
		}
		}else if($(this).index()===1){
			//完成降序的请求
			//1.请求到json数据
			$.ajax({
				url:"../lib/json/shoplist.json",
				dataType:'json',
				success:function(res){
					//改变此时的res
					let resNew=res;
					resNew.sort(sortPriceDown);
					
					//2.配置分页器参数
					$('.page').pagination({
					  pageCount:Math.ceil(resNew.length / 15), // 总页数
					  current: 1, // 当前页
					  jump: true,
					  coping: true,
					  homePage: '首页', // 首页按钮的文本
					  endPage: '末页', // 末页按钮的文本
					  prevContent: '上页',
					  nextContent: '下页',
					  callback: function (api) { // 当你切换页面的时候会触发
						let curr = api.getCurrent()
						// console.log(curr)
						let list = resNew.slice((curr - 1) * 15, curr * 15)  //3.每页按照索引在数组中取出15个对象
						//点击到换页的时候执行渲染
						bindHtml(list)
					  }
					});
					//5.请求到数据先对页面渲染一次
					bindHtml(resNew.slice(0, 15))
				}
			});
		//4.页面渲染
		 function bindHtml(list){
			// console.log(list)
			let str='';
			list.forEach(item=>{
				str+=`
					<li data-id="${ item.id }">
						<img src="${item.img_src}" >
						<h3>${item.name}</h3>
						<h5>${item.des}</h5>
						<span>￥${item.price}</span>
					</li>
				`
			});
			$('.shopbox ul').html(str);
		}
	}else if($(this).index()===2){
		//升序排列
		$.ajax({
				url:"../lib/json/shoplist.json",
				dataType:'json',
				success:function(res){
					//改变此时的res
					let resNew=res;
					resNew.sort(sortPriceUp);
					//2.配置分页器参数
					$('.page').pagination({
					  pageCount:Math.ceil(resNew.length / 15), // 总页数
					  current: 1, // 当前页
					  jump: true,
					  coping: true,
					  homePage: '首页', // 首页按钮的文本
					  endPage: '末页', // 末页按钮的文本
					  prevContent: '上页',
					  nextContent: '下页',
					  callback: function (api) { // 当你切换页面的时候会触发
						let curr = api.getCurrent()
						// console.log(curr)
						let list = resNew.slice((curr - 1) * 15, curr * 15)  //3.每页按照索引在数组中取出15个对象
						//点击到换页的时候执行渲染
						bindHtml(list)
					  }
					})
					
					//5.请求到数据先对页面渲染一次
					bindHtml(resNew.slice(0, 15))
				}
			})
		//4.页面渲染
		 function bindHtml(list){
			// console.log(list)
			let str='';
			list.forEach(item=>{
				str+=`
					<li data-id="${ item.id }">
						<img src="${item.img_src}" >
						<h3>${item.name}</h3>
						<h5>${item.des}</h5>
						<span>￥${item.price}</span>
					</li>
				`
			});
			$('.shopbox ul').html(str);
		}
	}
	})
	</script>
</body>
</html>
